import React, { createRef } from 'react'
import './App.css'
class PayAlert extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      money: "",
      payType: "0"
    }
  }
  confirm() {
    this.props.showMsgAlert(0)
    this.props.saveData(this.state)
  }
  render() {
    return(
      <div className="box">
        <div className="alert">
          <h3 className="header">支付</h3>
          <div className="content">
            <div className="item">
              <label>支付金额</label>
              <input value={this.state.money} onChange={e => this.setState({
                money: e.target.value
              })}></input>
            </div>
            <div className="item">
              <label>支付方式</label>
              <button onClick={() => this.setState({
                payType: '支付宝'
              })}>支付宝</button>
              <button onClick={() => this.setState({
                payType: '微信支付'
              })}>微信支付</button>
            </div>
            <button onClick={() => this.props.showMsgAlert(0)}>关闭</button>
            <button onClick={() => this.confirm()}>确认</button>
          </div>
        </div>
      </div>
    )
  }
}

class MsgAlert extends React.Component {
  constructor(props) {
    super(props)
    this.wxRef = createRef()
    this.sexRef = createRef()

    this.state = {
      timeList: [
        {
          date: '11月28日 18:00-19:00'
        },
        {
          date: '11月28日 19:00-20:00'
        },
        {
          date: '11月28日 20:00-21:00'
        },
        {
          date: '11月28日 21:00-22:00'
        },
      ],
      sex: 2,
      date: "",
      wxNum: ""
    }
  }
  confirm() {
    // 让第二个弹窗出来
    this.props.showMsgAlert(2)
    // 收集本组件的所有的数据
    // 把数据传给父组件
    this.props.addList({
      wxNum: this.state.wxNum,
      date: this.state.date,
      sex: this.state.sex,
      show: false
    })
  }
  render() {
    return (
      <div className="box">
        <div className="alert">
          <h3 className="header">填写预约资料</h3>
          <div className="content">
            <div className="item">
              <label>微信号</label>
              <input value={this.state.wxNum} onChange={(e) => this.setState({
                wxNum: e.target.value
              })}></input>
            </div>
            <div className="item">
              <label>性别</label>
              <span>
                <input type="radio" name="sex" checked={this.state.sex === 1} value={this.state.sex} onChange={(e) => this.setState({
                  sex: 1
                })}></input>
                <label>男</label>
              </span>
              <span>
                <input type="radio" name="sex" checked={this.state.sex === 2} value={this.state.sex} onChange={(e) => this.setState({
                  sex: 2
                })}></input>
                <label>女</label>
              </span>
            </div>
            <div className="item">
              <label>选择咨询时间</label>
              <div>
                {
                  this.state.timeList.map((item, key) => <button onClick={() => this.setState({
                    date: item.date
                  })} key={key} >{item.date}</button>)
                }
              </div>
            </div>
            <button onClick={() => this.props.showMsgAlert(0)}>关闭</button>
            <button onClick={() => this.confirm()} >确认预约</button>
          </div>
        </div>
      </div>
    )
  }
}


class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      step: 0,
      list: []
    }
  }
  showMsgAlert(flag){
    // 要出现一个弹窗，是一个填写资料的弹窗
    this.setState({
      step: flag
    })
  }
  addList(data) {
    let list = this.state.list
    list.push(data)
    this.setState({
      list
    })
  }
  saveData(data) {
    let item = this.state.list.pop()
    item = Object.assign({}, item, data)
    console.log('处理完以后的数据', item)
    item.show = true
    let list = this.state.list
    list.push(item)
    this.setState({
      list
    })
  }
  render() {
    return (
      <div>
        <button onClick={() => this.showMsgAlert(1)}>预约</button>
        {
          this.state.step === 1 ? <MsgAlert addList={(data) => this.addList(data)} showMsgAlert={(flag) => this.showMsgAlert(flag)}></MsgAlert> : null
        }
        {
          this.state.step === 2 ? <PayAlert saveData={(data) => this.saveData(data)} showMsgAlert={(flag) => this.showMsgAlert(flag)}></PayAlert> : null
        }
        {
          this.state.list.filter(item => item.show).map((item, key) => <div key={key}>
            <span>{item.wxNum}</span>
            <span>{item.date}</span>
            <span>{item.payType}</span>
          </div>)
        }
      </div>
    )
  }
}
export default App;
